<template>
	<div id="app">
		<el-container>
			<el-header>
				<img src="~@/assets/logo.png" class="he__logo" alt="" />
				<img src="~@/assets/tmxx.png" class="he__logotext" alt="" />
			</el-header>
			<el-container class="con" style="height: calc(100vh - 113px);">
				<el-aside>
					<div ref='asidetop'>
						<div class="cz">
							<div class="cz__item" style="height: 28px;" v-for="(item,index) in czlist" :key="index">{{item}}
							</div>
						</div>
						<div class="form">
							<div class="form_item">
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
									<template slot="prepend">裁剪日期 :</template>
								</el-input>
								-
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
								</el-input>
							</div>
							<div class="form_item">
								<el-input placeholder="2024-02-18" suffix-icon="el-icon-date" v-model="form.value1">
									<template slot="prepend">登记日期 :</template>
								</el-input>
								-
								<el-input placeholder="2024-02-18" suffix-icon="el-icon-date" v-model="form.value1">
								</el-input>
							</div>
							<div class="form_item">
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
									<template slot="prepend">收回日期 :</template>
								</el-input>
								-
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
								</el-input>
							</div>
							<div class="form_item">
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
									<template slot="prepend">结束时间 :</template>
								</el-input>
								-
								<el-input placeholder="0000-00-00" suffix-icon="el-icon-date" v-model="form.value1">
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">产品分类 :</template>
						
								</el-input>
								<el-input placeholder="" class="qian" v-model="form.value">
						
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">制单部门 :</template>
						
								</el-input>
								<el-input placeholder="" class="qian" v-model="form.value">
						
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">订单号 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">单据号 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">产品 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">人员 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">工序 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">颜色 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">尺码 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">客户 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.v">
									<template slot="prepend">生产单号 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">床号 :</template>
								</el-input>
							</div>
							<div class="bz">
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">扎号 :</template>
								</el-input>
							</div>
							<div class="fo">
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">条码 :</template>
								</el-input>
								<el-input placeholder="" suffix-icon="" v-model="form.v">
									<template slot="prepend">拆分 :</template>
								</el-input>
							</div>
							<div class="footer">
								<el-checkbox label="时间查询"></el-checkbox>
								<div style="display: flex;align-items: center;">
									<div class="footer_btn">
										取消
									</div>
									<div class="footer_btn btn1">
										确认
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="xuan" :style="{height:`calc(100% - ${asidetoph}px - 5px)`,marginTop:'5px'}">
						<div>
							<div class="xuan_label">
								工号录入：
							</div>
							<div class="xuan_box">
								<el-radio-group v-model="radio">
									<el-radio :label="3">全部</el-radio>
									<el-radio :label="6">已录入</el-radio>
									<el-radio :label="9">未录入</el-radio>
								</el-radio-group>
							</div>
							<div class="xuan_label">
								是否新增：
							</div>
							<div class="xuan_box">
								<el-radio-group v-model="radio">
									<el-radio :label="3">全部</el-radio>
									<el-radio :label="6">是</el-radio>
									<el-radio :label="9">否</el-radio>
								</el-radio-group>
							</div>
							<div class="xuan_label">
								是否差额：
							</div>
							<div class="xuan_box">
								<el-radio-group v-model="radio">
									<el-radio :label="3">全部</el-radio>
									<el-radio :label="6">是</el-radio>
									<el-radio :label="9">否</el-radio>
								</el-radio-group>
							</div>
							<div class="xuan_label">
								类别：
							</div>
							<div class="xuan_box">
								<el-radio-group v-model="radio">
									<el-radio :label="3">全部</el-radio>
									<el-radio :label="6">已录入</el-radio>
									<el-radio :label="9">未录入</el-radio>
								</el-radio-group>
							</div>
							<div class="xuan_label">
								颜色类型：
							</div>
							<div class="xuan_box">
								<el-radio-group v-model="radio">
									<el-radio :label="3">全部</el-radio>
									<el-radio :label="6">已录入</el-radio>
									<el-radio :label="9">未录入</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>



				</el-aside>
				<el-main>
					<div class="mian__top" ref="mian__top">
						<el-button v-for='(item,index) in btnlist' :key="index"
							:style="{color:item.color,background:item.bgcolor}">{{item.text}}</el-button>
					</div>
					<div class="mian__box" :style="{height:`calc(100% - 30px - ${mainTopheight}px)`}">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				czlist: ['今天', '昨天', '30天', '90天'],
				form: {
					value1: '',
					value: '',
					v: ""
				},
				radio:3,
				btnlist: [{
						text: '补录',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '删行',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '传出',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '预览',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},{
						text: '页面',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},  {
						text: '查询',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '刷新',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '项目',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '打印',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '筛选',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},
					{
						text: '关闭',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}
				],
				curindex: '',
				mainTopheight: 0,
				asidetoph:0
			}
		},
		mounted() {
			// let height = this.$refs.mian__top.offsetHeight; //100
			this.mainTopheight = this.$refs.mian__top.offsetHeight
			this.asidetoph = this.$refs.asidetop.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.mainTopheight = _this.$refs.mian__top.offsetHeight
				_this.asidetoph = _this.$refs.asidetop.offsetHeight
				console.log(_this.asidetoph)
			};

		},

	}
</script>
<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.el-header {
		background-color: #fff;
		height: 111px !important;
		display: flex;
		align-items: center;
		padding-left: 43px;

	}

	.he__logo {
		width: 64px;
		height: 53px;
		margin-right: 5px;
	}

	.he__logotext {
		width: 160px;
		height: 24px;
	}

	.el-aside {
		background-color: #fff;
		width: fit-content !important;
		padding: 0 16px 0 44px;

	}

	.el-main {
		padding: 0 !important;
		background-color: #f1f4f6;
	}

	.con {}

	.dian {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		border: 3px solid #4A77F6;
		margin-right: 25px;
		justify-content: center;
		opacity: 0.39;
	}

	.el-submenu-title-1 {
		display: flex;
		align-items: center;
		font-size: 19px;
		padding-left: 20px;
	}

	.dian1 {
		width: 8px;
		height: 8px;
		background: #4E6781;
		border-radius: 4px;
		opacity: 0.5;
		margin-right: 5px;

	}

	.el-submenu .el-menu-item {
		font-size: 16px;
		padding-left: 90px !important;
	}

	.active {
		opacity: 1;
	}

	.lefttop {
		height: 61px;
		background: #4A77F6;
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 21px;
		color: #FFFFFF;


	}

	.lefttop__icon {
		width: 30px;
		height: 30px;
		margin-left: 44px;
		margin-right: 17px;
	}

	.cz {
		display: flex;
		align-items: center;


	}

	.cz__item {
		width: 25%;
		background: rgba(74, 119, 246, .5);
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 18px;
		color: #231918;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 1px 0 0;
		cursor: pointer;
		margin-bottom: 5px;
	}

	.el-button+.el-button {
		margin-left: 2px;
	}

	.mian__top {
		background-color: #fff;
		padding-bottom: 5px;
	}

	.mian__box {
		width: calc(100% - 30px);
		padding: 15px;
	}


	/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
	.el-aside::-webkit-scrollbar {
		display: none;
	}

	/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
	.el-aside {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	.form_item {
		display: flex;
		align-items: center;
		margin-top: 10px;
		justify-content: space-between;
	}

	/deep/.el-input__inner {
		width: 140px;
		padding-left: 10px;
	}

	/deep/.form_item .el-input__inner {
		width: 180px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;

	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
		width: 79px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.el-input--suffix .el-input__inner {
		padding-right: 20px;
	}


	/deep/.bz .el-input {
		width: 100%;
		display: flex;
	}

	/deep/.bz .el-input .el-input__inner {
		width: 100%;
	}

	/deep/.bz .el-input .el-input-group__prepend {
		flex-shrink: 0;
		/* width: 79px;  */
		display: flex;
		align-items: center;
	}

	.bz {
		display: flex;
		flex: 1;
		margin-top: 10px;
		position: relative;
	}

	.qian {
		position: absolute;
	}

	/deep/.qian {
		width: 97px !important;
		display: flex;
		left: calc(79px + 20px);

	}

	/deep/.qian .el-input__inner {
		width: 97px !important;
		border-radius: 0 !important;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1E173C;
		margin-top: 22px;
	}

	.footer_btn {
		width: 60px;
		height: 31px;
		background: #ececec;
		border: 1px solid #cbcbcb;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #cbcbcb;
		cursor: pointer;
		margin-left: 22px;
		border-radius: 4px;
	}

	.btn1 {
		color: #4A77F6;
		border: 1px solid #4A77F6;
		background: #dbe4fd;
	}

	.fo {
		margin-top: 10px;
	}

	.xuan {
		overflow-y: auto;
		
	}

	.xuan_label {
		width: calc(100% - 10px);
		height: 47px;
		background: #F5F7FA;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 17px;
		color: #1E173C;
		display: flex;
		align-items: center;
		padding-left: 10px;
	}
	.xuan_box{
		padding: 6px 0;
		padding-left: 10px;
	}
</style>